<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span v-once>{{msg}}</span>
			<span v-bind:class="className">my color</span>
			<div v-html="rawHtml"></div>
			<div>{{num+1}}</div>
			<div>{{num==1?'yes':'no'}}</div>
			<div>{{msg.split('').reverse().join('')}}</div>
			<div v-bind:class="{active:isActive}">777</div>
			<div v-bind:style="{color}">888</div>
			<div v-if="seen==true">now you see me</div>
			<div v-else-if="seen==false">no see</div>
			<div v-else>no no see see</div>
			<ul>
				<li v-for="item,index in items">{{index}}, {{item.message}}</li>
			</ul>
			<ul>
				<li v-for="value,key in object">{{key}}: {{value}}</li>
			</ul>
			<div @click="click1"><div @click.stop="click2">click</div></div>
			<div v-on:click="greet('abc',$event)">greet</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				seen:'ppp',
				num:1,
				msg:'once',
				className:'red-div',
				rawHtml:'<span class="red-div">rawHtml</span>',
				isActive:true,
				color:'red',
				items:[
					{message:'say'},
					{message:'hello'},
					{message:'world'},
				],
				object:{
					title:'Hello Vue World',
					content:'My Vue Learning'
				}
			},
			methods:{
				click1:function(){
					console.log('cliled1');
				},
				click2:function(){
					console.log('cliled2');
				},
				greet:function(str,e){
					e.stopPropagation();
					console.log("hello world "+str);
				}
			}
		});
		vm.msg='twice';
	</script>
	<style type="text/css">
		.red-div{
			color: red;
		}
		.active{
			color: aqua;
		}
	</style>
</html>
